<template>
  <div class="console">
    <div class="personal">
      <div class="avator">
        <img src="@/assets/timg.jpeg" alt />
        <div class="userinfo">
          <div class="name">Mr.Y</div>
          <div class="desc">
            <span>老弟，要来一把王者吗？</span>
          </div>
        </div>
      </div>
      <div class="total">
        <div class="number">
          <a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
          <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
        </div>
        <div class="view">
          <a-statistic
            title="Feedback"
            :value="11.28"
            :precision="2"
            suffix="%"
            :value-style="{ color: '#3f8600' }"
            style="margin-right: 50px"
          >
            <template #prefix>
              <a-icon type="arrow-up" />
            </template>
          </a-statistic>
          <a-statistic
            title="Idle"
            :value="9.3"
            :precision="2"
            suffix="%"
            class="demo-class"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <a-icon type="arrow-down" />
            </template>
          </a-statistic>
        </div>
      </div>
    </div>
    <div class="charts-user">
      <div class="user" style="width:56%">
        <div id="user" style="width:100%;"></div>
        <div class="title">用户新增</div>
      </div>
      <div class="user-table" style="width:40%;height:400px">
        <a-list size="large" bordered :data-source="list">
          <div class="title" slot="header">系统信息</div>
          <a-list-item slot="renderItem" slot-scope="item">
            <a slot="actions">edit</a>
            <a slot="actions">more</a>
            {{ item }}
          </a-list-item>
        </a-list>
      </div>
    </div>
    <div class="task" style="margin-top:30px">
      <div class="test" style="width:38%">
        <div id="circle" style="width:100%;"></div>
        <div class="title">用户新增</div>
      </div>
      <a-table
        style="width:54%"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="tableData"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
      </a-table>
    </div>
    <a-divider />
    <div class="list-tips">
      <div class="item" v-for="(item,index) of opreationList" :key="index">
        <a-icon type="step-backward" size="30px" />
        <div class="title">{{item.title}}</div>
      </div>
    </div>
    <a-divider />
    <div class="line">
      <div class="line-charts" style="width:70%">
        <div id="line" style="width:100%;"></div>
        <div class="title">用户新增</div>
      </div>
      <div style="width:20%;height:400px">
        <div class="title">
          <span>TODO :</span>
        </div>
        <div :style="{ borderBottom: '1px solid #E9E9E9' }">
          <a-checkbox
            :indeterminate="indeterminate"
            :checked="checkAll"
            @change="onCheckAllChange"
          >选择全部</a-checkbox>
        </div>
        <br />
        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import DataSet from "@antv/data-set";
import { Chart } from "@antv/g2";

@Component({
  components: {},
})
export default class Console extends Vue {
  // 操作card
  private opreationList: any = [
    {
      title: "吃饭",
    },
    {
      title: "睡觉",
    },
    {
      title: "打豆豆",
    },
    {
      title: "聊天",
    },
    {
      title: "看书",
    },
    {
      title: "吹牛皮",
    },
  ];
  // checkbox group
  private plainOptions: string[] = [
    "Apple",
    "Pear",
    "Orange",
    "吃饭",
    "睡觉",
    "打豆豆",
  ];
  // checked box
  private defaultCheckedList: string[] = ["Apple", "Orange"];
  private checkedList = this.defaultCheckedList;
  private indeterminate = true;
  private checkAll = false;
  // carts data
  private chartsData: any = [
    { year: "2002", value: 10 },
    { year: "2003", value: 20 },
    { year: "2004", value: 50 },
    { year: "2005", value: 40 },
    { year: "2006", value: 50 },
    { year: "2007", value: 20 },
    { year: "2008", value: 25 },
    { year: "2009", value: 70 },
    { year: "2010", value: 120 },
    { year: "2011", value: 140 },
    { year: "2012", value: 80 },
    { year: "2013", value: 250 },
    { year: "2014", value: 280 },
    { year: "2015", value: 400 },
    { year: "2016", value: 400 },
    { year: "2017", value: 800 },
    { year: "2018", value: 1000 },
  ];
  // table columns
  private columns: any = [
    {
      title: "Name",
      dataIndex: "name",
      scopedSlots: { customRender: "name" },
    },
    {
      title: "Age",
      dataIndex: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
    },
  ];
  // table data
  private tableData: any = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
    },
    {
      key: "4",
      name: "Disabled User",
      age: 99,
      address: "Sidney No. 1 Lake Park",
    },
  ];
  // select table colums
  private selectedRowKeys: any = [];
  // task list
  private list: string[] = [
    "Racing car sprays burning fuel into crowd.",
    "Japanese princess to wed commoner.",
    "Australian walks 100km after outback crash.",
    "Man charged over missing wedding girl.",
    "Los Angeles battles huge wildfires.",
    "Racing car sprays burning fuel into crowd.",
  ];
  // lifecircle
  public mounted() {
    this.openNotification();
    this.createChartsUser();
    this.createCircleCharts();
    this.createLine();
  }
  // openNotification
  public openNotification() {
    this.$notification.open({
      message: "注意：",
      duration: 5,
      description:
        "当前框架是使用VUE+TYPESCRIPT+ANTD构架的，由于开发是个没有艺术天分的傻吊，所以。。。很丑",
      onClick: () => {
        console.log("Notification Clicked!");
      },
    });
  }
  // craete charts
  private createChartsUser() {
    const ds = new DataSet();
    const dv = ds.createView().source(this.chartsData);
    dv.transform({
      type: "map",
      callback: (row: any) => {
        row.year = parseInt(row.year, 10);
        return row;
      },
    }).transform({
      type: "regression",
      method: "polynomial",
      fields: ["year", "value"],
      bandwidth: 0.1,
      as: ["Year", "Value"],
    });

    const chart = new Chart({
      container: "user",
      autoFit: true,
      height: 400,
      padding: [20, 40],
    });

    chart.scale({
      Year: {
        range: [0, 1],
      },
      value: {
        alias: "市值 (亿美元)",
        sync: true,
        nice: true,
      },
      Value: {
        sync: true,
        nice: true,
      },
    });
    chart.axis("year", {
      tickLine: null,
    });

    const view1 = chart.createView();
    view1.data(this.chartsData);
    view1.interval().position("year*value").style({
      fillOpacity: 1,
    });

    const view2 = chart.createView();
    view2.axis(false);
    view2.data(dv.rows);
    view2
      .line()
      .position("Year*Value")
      .style({
        stroke: "#969696",
        lineDash: [3, 3],
      })
      .tooltip(false);
    view2.annotation().text({
      content: "趋势线",
      position: ["min", "min"],
      style: {
        fill: "#8c8c8c",
        fontSize: 14,
        fontWeight: 300,
      },
      offsetY: -140,
    });

    chart.render();
  }
  // craete charts

  private createCircleCharts() {
    const data = [
      { year: "1991", value: 15468 },
      { year: "1992", value: 16100 },
      { year: "1993", value: 15900 },
      { year: "1994", value: 17409 },
      { year: "1995", value: 17000 },
      { year: "1996", value: 31056 },
      { year: "1997", value: 31982 },
      { year: "1998", value: 32040 },
      { year: "1999", value: 33233 },
    ];
    const chart = new Chart({
      container: "circle",
      autoFit: true,
      height: 240,
    });

    chart.data(data);
    chart.scale({
      value: {
        min: 10000,
        nice: true,
      },
      year: {
        range: [0, 1],
      },
    });
    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart.axis("value", {
      label: {
        formatter: (val) => {
          return (+val / 10000).toFixed(1) + "k";
        },
      },
    });

    chart.area().position("year*value");
    chart.line().position("year*value");

    chart.render();
  }
  // select table
  private hasSelected() {
    return this.selectedRowKeys.length > 0;
  }

  // select table
  private onSelectChange(selectedRowKeys: any) {
    console.log("selectedRowKeys changed: ", selectedRowKeys);
    this.selectedRowKeys = selectedRowKeys;
  }

  // craete charts
  private createLine() {
    // 默认已经加载 legend-filter 交互
    const data = [
      { month: "Jan", city: "Tokyo", temperature: 7 },
      { month: "Jan", city: "London", temperature: 3.9 },
      { month: "Feb", city: "Tokyo", temperature: 6.9 },
      { month: "Feb", city: "London", temperature: 4.2 },
      { month: "Mar", city: "Tokyo", temperature: 9.5 },
      { month: "Mar", city: "London", temperature: 5.7 },
      { month: "Apr", city: "Tokyo", temperature: 14.5 },
      { month: "Apr", city: "London", temperature: 8.5 },
      { month: "May", city: "Tokyo", temperature: 18.4 },
      { month: "May", city: "London", temperature: 11.9 },
      { month: "Jun", city: "Tokyo", temperature: 21.5 },
      { month: "Jun", city: "London", temperature: 15.2 },
      { month: "Jul", city: "Tokyo", temperature: 25.2 },
      { month: "Jul", city: "London", temperature: 17 },
      { month: "Aug", city: "Tokyo", temperature: 26.5 },
      { month: "Aug", city: "London", temperature: 16.6 },
      { month: "Sep", city: "Tokyo", temperature: 23.3 },
      { month: "Sep", city: "London", temperature: 14.2 },
      { month: "Oct", city: "Tokyo", temperature: 18.3 },
      { month: "Oct", city: "London", temperature: 10.3 },
      { month: "Nov", city: "Tokyo", temperature: 13.9 },
      { month: "Nov", city: "London", temperature: 6.6 },
      { month: "Dec", city: "Tokyo", temperature: 9.6 },
      { month: "Dec1", city: "London", temperature: 4.8 },
      { month: "Dec2", city: "London", temperature: 6.8 },
      { month: "Dec3", city: "London", temperature: 7.8 },
      { month: "Dec4", city: "London", temperature: 8.8 },
      { month: "Dec5", city: "London", temperature: 9.8 },
      { month: "Dec6", city: "London", temperature: 9.8 },
      { month: "Dec7", city: "London", temperature: 4.8 },
      { month: "Dec8", city: "London", temperature: 40.8 },
      { month: "Dec9", city: "London", temperature: 34.8 },
      { month: "Dec10", city: "London", temperature: 24.8 },
      { month: "Dec11", city: "London", temperature: 14.8 },
    ];

    const chart = new Chart({
      container: "line",
      autoFit: true,
      height: 400,
    });

    chart.data(data);
    chart.scale({
      month: {
        range: [0, 1],
      },
      temperature: {
        nice: true,
      },
    });

    chart.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart.axis("temperature", {
      label: {
        formatter: (val) => {
          return val + " °C";
        },
      },
    });

    chart.line().position("month*temperature").color("city").shape("smooth");

    chart
      .point()
      .position("month*temperature")
      .color("city")
      .shape("circle")
      .style({
        stroke: "#fff",
        lineWidth: 1,
      });

    chart.render();
  }
  // checkbox
  private onChange(checkedList: any) {
    this.indeterminate =
      !!checkedList.length && checkedList.length < this.plainOptions.length;
    this.checkAll = checkedList.length === this.plainOptions.length;
  }
  // checked all box
  private onCheckAllChange(e: any) {
    Object.assign(this, {
      checkedList: e.target.checked ? this.plainOptions : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  }
}
</script>
<style lang="less" scoped>
.console {
  .personal {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .avator {
      display: flex;
      justify-content: flex-start;
      img {
        width: 72px;
        height: 72px;
        border-radius: 8px;
      }
      .userinfo {
        margin-left: 20px;
      }
      .name {
        font-size: 20px;
        font-weight: 600;
      }
      .desc {
        margin-top: 10px;
      }
    }
    .total {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .number {
        display: flex;
        justify-content: flex-start;
        margin-right: 30px;
      }
      .view {
        display: flex;
        justify-content: flex-start;
      }
    }
  }
  .charts-user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    .user {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
  .task,
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    .test,
    .line-charts {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
  .title {
    padding: 10px 0;
  }

  .list-tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    .item {
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      display: flex;
      cursor: pointer;
    }
  }
}
</style>